<template>
  <div>
    <el-card class="sun-el-card">
      <sunUpdataAdd :title="this.$route.meta.title" :tab-list="tabList" :show-adddata="false" />
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :header-cell-style="{color:'#000000'}"
      >
        <el-table-column label="ID" prop="id" width="150" />
        <el-table-column label="字段名称" prop="description" />
        <el-table-column label="是否菜单">
          <template slot-scope="{row}">
            <div>
              <span v-if="row.menu === 1" style="color: #409eff;">是</span>
              <span v-if="row.menu === 0">否</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="隐藏菜单">
          <template slot-scope="{row}">
            <div>
              <span v-if="row.hidden_menu === 1" style="color: #409eff;">是</span>
              <span v-if="row.hidden_menu === 0">否</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="setMenu(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-drawer
      class="sun-el-drawer"
      :with-header="false"
      :destroy-on-close="true"
      :wrapper-closable="false"
      :visible.sync="show_setPages"
      direction="rtl"
    >
      <setPages />
    </el-drawer>
  </div>
</template>

<script>
import { $tooltips } from '@/sun-components/SunMsg.js'
import { get, post } from '@/api/request'
import SunUpdataAdd from '@/sun-components/SunUpdataAdd'
import SetPages from './components/setPages'
export default {
  components: { SetPages, SunUpdataAdd },
  data() {
    return {
      tabListRight: [
        { id: 1, old_id: 1, name: '更新权限', value: 'permissions/refresh', icon: '', type: 'primary', loading: false }
      ],
      tabList: [],
      listLoading: false,
      list: [],
      currentItem: null,
      show_setPages: false,
      formData: {}
    }
  },
  created() {
    this.upData()
  },
  methods: {
    async upData() {
      this.listLoading = true
      await get('permissions?tree=1', {}).then((response) => {
        if (response.code === 0) {
          this.list = response.data
        }
        this.listLoading = false
      })
    },
    async tabHeaderBtn(id) {
      const _that = this
      _that.tabListRight.forEach((item) => {
        if (item.id === id) {
          _that.$set(item, 'loading', true)
          post(item.value, {}).then((response) => {
            if (response.code === 0) {
              $tooltips('更新成功!', 'success')
            }
            _that.$set(item, 'loading', false)
          })
        }
      })
    },
    async setMenu(row) {
      this.$set(this, 'formData', {})
      this.$set(this.formData, 'menu', false)
      this.$set(this.formData, 'page_name', '')
      this.$set(this.formData, 'hidden_menu', false)
      this.$set(this.formData, 'sort', 1)
      this.$set(this.formData, 'icon', '')
      this.currentItem = row
      if (row) {
        this.$set(this.formData, 'menu', !!row.menu)
        // this.$set(this.formData, 'page_name', row.menpage_nameu)
        this.$set(this.formData, 'page_name', row.page_name)
        this.$set(this.formData, 'hidden_menu', !!row.hidden_menu)
        this.$set(this.formData, 'sort', row.sort)
        this.$set(this.formData, 'icon', row.icon)
      }
      console.log('this.formData', this.formData)
      this.show_setPages = true
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
</style>
